import React, { useState, useMemo, useCallback, useEffect } from 'react';
import './style.less';
// import classNames from "classnames";
import { PickerView } from 'antd-mobile';


const SelectItem = ({setType}) => {

  const [value, setValue] = useState(0);
  const [show, setShow] = useState(false);

  const list = useMemo(() => {
    return [
      [{ label: '精神科', value: 0, },
      { label: '神经内科', value: 1, },
      { label: '消化科', value: 2, },
      { label: '其他科室', value: 3, },
      ]
    ]
  }, [])
  const know = useMemo(() => {
    return { 0: '精神科', 1: '神经内科', 2: '消化科', 3: '其他科室', }
  }, [])
  const onChange = useCallback((value) => {
    setValue(value[0])
    setShow(false)
    setType(value[0])
  }, [setType])

  useEffect(() => {
  }, [])
  return <div className="ProductInfo-SelectItem">
    <div className="select-view">
      <p className="select-view-p1">
        <img className="select-view-img1" src={require('../../assests/img/zuanshi.png')} alt="" />
        <span>疾病领域</span>
      </p>
      <p className="select-view-p2" onClick={() => { setShow(true) }}>
        <img className="select-view-img2" src={require('../../assests/img/star.png')} alt="" />
        <span>{know[value]}</span>
        <img className="select-view-img3" src={require('../../assests/img/down.png')} alt="" />
      </p>
    </div>
    {show && <div className="PickerView-box" onClick={() => setShow(false)}></div>}
    {show &&
      <div className="PickerView-b">
        <PickerView
          onChange={onChange}
          value={[value]}
          data={list}
          cascade={false}
        />
      </div>
    }

  </div>
}


export default React.memo(SelectItem)